<template>
  <div class="detail-box">
    <el-dialog
        v-model="detailDialogVisible"
        title="流程详情"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
        style="height: 45vh;
        background-color:#fff;"
        :close="handleClose"
    >
      <div class="leave-detail-box">
        <div class="top">
          <div class="t1">
            <div class="t1-item">
              <div class="t1-title">请假时间</div>
              <div class="t1-con">{{detail_form.starting_date}} &nbsp;至 &nbsp;{{detail_form.termination_date}}</div>
            </div>
            <div class="t1-item">
              <div class="t1-title">请假天数</div>
              <div class="t1-con">{{detail_form.total_days}}</div>
            </div>
          </div>
          <div class="t2">
            <div class="t2-item">
              <div class="t2-title">请假事由</div>
              <div class="t2-con">{{detail_form.flow_detail}}</div>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="b1">
            <div class="b1-item">
              <div class="b1-title">审核状态</div>
              <div class="b1-con">
                <div v-if="detail_form.status === 0">已提交</div>
                <div v-if="detail_form.status === 1">审核中</div>
                <div v-if="detail_form.status === 2">已完成</div>
              </div>
            </div>
            <div class="b1-item">
              <div class="b1-title">当前审核人</div>
              <div class="b1-con">{{ detail_form.operator_name }}</div>
            </div>
            <div class="b1-item">
              <div class="b1-title">抄送人</div>
              <div class="b1-con">
                {{ detail_form.copy_name ? detail_form.copy_name : '无' }}
              </div>
            </div>
          </div>
          <div class="b2">
            <div class="b2-item">
              <div class="b2-title">历史审批</div>
              <div class="b2-con" v-if="historyOperator.length">
                <p v-for="(item,index) in historyOperator" :key="index" style="font-weight: 600; color: #1E90FF">
                  {{ item }}&nbsp;
                  <span v-if="!isLastItem(index)" style="font-weight: 400; color: black">
                    -> &nbsp;
                  </span>
                </p>
              </div>
              <div class="b2-con" v-else>
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<template #footer>-->
      <!--  <div class="dialog-footer" v-if="isRecallShow">-->
      <!--    <el-button type="primary" @click="recall">-->
      <!--      撤回申请-->
      <!--    </el-button>-->
      <!--  </div>-->
      <!--</template>-->
    </el-dialog>
  </div>
</template>

<script setup>
import {ElButton, ElDialog, ElMessage, ElMessageBox} from "element-plus"
import {getALLFlowList, getCurrentFlow, recallFlow} from "@/api"
import {onMounted, reactive, ref, defineEmits} from "vue"
import {useRoute} from "vue-router"

const route = useRoute()
const emits = defineEmits(['refreshPassed','refreshRefused','refreshGoing'])

const isRecallShow = ref(true)
const userId = ref('')
const detailDialogVisible = ref(false)
const historyOperator = ref([])
let detail_form = reactive({
  starting_date:'',
  termination_date:'',
  flow_detail:'',
  total_days:'',
  status:'',
  operator_name:'',
  copy_name:'',
})
const history_operator = ref([])

let currentId

onMounted(()=>{
  userId.value = getId()
  if(route.path === '/refuse-flows' || route.path === '/passed-flows' || detail_form.status === 2){
    isRecallShow.value = false
  } else if (route.path === '/copy'){
    isRecallShow.value = false
  }
})

const getId = () => {
  const info = JSON.parse(localStorage.getItem('syhyDocManSys'))
  return info.id
}

const getList = async () => {
  try {
    const {data:res} = await getALLFlowList({
      userId : userId.value
    })
    if(res && res.code === 201){
      return ElMessage({
        type:'info',
        message:'暂无请假申请'
      })
    } else if (res && res.code === 200) {
      tableData.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = async (id) => {
  currentId = id
  try {
    history_operator.value = []
    const {data:res} = await getCurrentFlow({
      flowId:id
    })
    if(res.code === 200){
      detail_form = res.data.info
      //遍历填充历史审批
      for (let i = 0; i < res.data.history_operator.length; i++){
        historyOperator.value.push(res.data.history_operator[i])
      }
      detailDialogVisible.value = true
    } else {
      ElMessage({
        message:'获取失败',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }
}


const recall = async () => {
  if(detail_form.status === 2){
    return ElMessage({
      message:'已完成的流程不能撤回!',
      type:'error'
    })
  }
  try {
    await new Promise((resolve, reject) => {
      ElMessageBox.confirm('确定撤回申请?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: action => {
          if (action === 'confirm') {
            resolve(); // 如果点击确定，则解析 Promise
          } else {
            reject(); // 如果点击取消，则拒绝 Promise
          }
        }
      });
    });
    // 如果点击确定，则执行后续操作
    const {data:res}=await recallFlow({
      flowId:currentId
    })
    if (res.code === 200){
      detailDialogVisible.value = false
      if(route.path === '/refuse-flows'){
        emits('refreshRefused')
      } else if (route.path === '/passed-flows'){
        emits('refreshPassed')
      } else if (route.path === '/going-flows'){
        emits('refreshGoing')
      }
      return ElMessage({
        message:'撤回成功!',
        type:'success'
      })
    } else if (res.code ===400 || res.code === 401){
      return ElMessage({
        message:'撤回失败!',
        type:'warning'
      })
    }
  } catch (error) {
    // 如果点击取消或者发生其他错误，则处理错误
    console.log(error)
  }
}

const computeDate = (date) => {
  return date.substring(0,10)
}

const isLastItem = (index) => {
  return index === historyOperator.value.length - 1;
}

const handleClose = () => {
  history_operator.value = []
}


defineExpose({
  showDetails,
})
</script>

<style scoped lang="less">
.detail-box{
  box-sizing: border-box;
  height: 95%;
  .leave-detail-box{
    width: 95%;
    margin: 3vh auto;
    .top{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      .t1{
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        display: flex;
        justify-content: space-between;
        .t1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t1-title{
            font-weight: 600;
            text-align: center;
            width: 30%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .t2{
        width: 100%;
        font-size: 1.6vh;
        background-color:#fff;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .t2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t2-title{
            font-weight: 600;
            text-align: center;
            width: 15%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
    .bot{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      .b1{
        display: flex;
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        .b1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b1-title{
            font-weight: 600;
            text-align: center;
            width: 49%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .b2{
        background-color:#fff;
        width: 100%;
        font-size: 1.6vh;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .b2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b2-title{
            font-weight: 600;
            text-align: center;
            width: 14%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
            display: flex;
            line-height: 5vh;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
